<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Etro - Todo App</title>
        <meta name="description" content="A simple todo application">
        <meta name="keywords" content="todo, tasks, organizer">
        <meta name="author" content="spacingtech_webify">
        <!-- favicon -->
        <link rel="shortcut icon" type="image/favicon" href="image/home1/favicon.png">
        <!-- plugin css -->
        <link rel="stylesheet" type="text/css" href="css/plugin.css">
        <!-- collection css -->
        <link rel="stylesheet" type="text/css" href="css/collection.css">
        <!-- feather -->
        <link rel="stylesheet" type="text/css" href="css/feather.css">
        <!-- style css -->
        <link rel="stylesheet" type="text/css" href="css/style1.css">
        <style>
            .todo-container {
                max-width: 800px;
                margin: 50px auto;
                padding: 20px;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }
            
            .todo-header {
                text-align: center;
                margin-bottom: 30px;
            }
            
            .todo-input {
                display: flex;
                margin-bottom: 20px;
            }
            
            .todo-input input {
                flex: 1;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 4px 0 0 4px;
                font-size: 16px;
            }
            
            .todo-input button {
                padding: 10px 20px;
                background: #4CAF50;
                color: white;
                border: none;
                border-radius: 0 4px 4px 0;
                cursor: pointer;
                font-size: 16px;
            }
            
            .todo-list {
                list-style: none;
                padding: 0;
            }
            
            .todo-item {
                display: flex;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #eee;
            }
            
            .todo-item:last-child {
                border-bottom: none;
            }
            
            .todo-item input[type="checkbox"] {
                margin-right: 10px;
            }
            
            .todo-item span {
                flex: 1;
            }
            
            .todo-item.completed span {
                text-decoration: line-through;
                color: #888;
            }
            
            .todo-item button {
                background: #f44336;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 5px 10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <!-- screen-bg start -->
        <div class="screen-bg"></div>
        <!-- screen-bg end -->
        <!-- preloader start -->
       <div class="preloader"></div>
        <!-- preloader end -->

        <!-- header-area start -->
        <header id="header" class="main-header stickyheader">
            <!-- Existing header content from index.html -->
        </header>
        <!-- header end -->

        <!-- main start -->
        <main id="main">
            <section class="section-ptb">
                <div class="container">
                    <div class="todo-container">
                        <div class="todo-header">
                            <h2>My Todo List</h2>
                        </div>
                        
                        <div class="todo-input">
                            <input type="text" id="todoInput" placeholder="Add a new task...">
                            <button id="addBtn">Add</button>
                        </div>
                        
                        <ul class="todo-list" id="todoList">
                            <!-- Todo items will be added here dynamically -->
                        </ul>
                    </div>
                </div>
            </section>
        </main>
        <!-- main end -->

        <!-- footer start -->
        <footer>
            <!-- Existing footer content from index.html -->
        </footer>
        <!-- footer end -->

        <!-- plugin js -->
        <script src="js/plugin.js"></script>
        <!-- theme js -->
        <script src="js/main.js"></script>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const todoInput = document.getElementById('todoInput');
                const addBtn = document.getElementById('addBtn');
                const todoList = document.getElementById('todoList');
                
                // Load todos from localStorage
                loadTodos();
                
                // Add todo event
                addBtn.addEventListener('click', addTodo);
                todoInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        addTodo();
                    }
                });
                
                function addTodo() {
                    const todoText = todoInput.value.trim();
                    if (todoText === '') return;
                    
                    // Create new todo item
                    const todoItem = document.createElement('li');
                    todoItem.className = 'todo-item';
                    
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.addEventListener('change', toggleTodo);
                    
                    const span = document.createElement('span');
                    span.textContent = todoText;
                    
                    const deleteBtn = document.createElement('button');
                    deleteBtn.textContent = 'Delete';
                    deleteBtn.addEventListener('click', deleteTodo);
                    
                    todoItem.appendChild(checkbox);
                    todoItem.appendChild(span);
                    todoItem.appendChild(deleteBtn);
                    
                    todoList.appendChild(todoItem);
                    
                    // Clear input
                    todoInput.value = '';
                    
                    // Save to localStorage
                    saveTodos();
                }
                
                function toggleTodo(e) {
                    const todoItem = e.target.parentElement;
                    if (e.target.checked) {
                        todoItem.classList.add('completed');
                    } else {
                        todoItem.classList.remove('completed');
                    }
                    
                    // Save to localStorage
                    saveTodos();
                }
                
                function deleteTodo(e) {
                    const todoItem = e.target.parentElement;
                    todoItem.remove();
                    
                    // Save to localStorage
                    saveTodos();
                }
                
                function saveTodos() {
                    const todos = [];
                    document.querySelectorAll('.todo-item').forEach(item => {
                        todos.push({
                            text: item.querySelector('span').textContent,
                            completed: item.querySelector('input').checked
                        });
                    });
                    
                    localStorage.setItem('todos', JSON.stringify(todos));
                }
                
                function loadTodos() {
                    const todos = JSON.parse(localStorage.getItem('todos')) || [];
                    
                    todos.forEach(todo => {
                        const todoItem = document.createElement('li');
                        todoItem.className = 'todo-item';
                        
                        if (todo.completed) {
                            todoItem.classList.add('completed');
                        }
                        
                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.checked = todo.completed;
                        checkbox.addEventListener('change', toggleTodo);
                        
                        const span = document.createElement('span');
                        span.textContent = todo.text;
                        
                        const deleteBtn = document.createElement('button');
                        deleteBtn.textContent = 'Delete';
                        deleteBtn.addEventListener('click', deleteTodo);
                        
                        todoItem.appendChild(checkbox);
                        todoItem.appendChild(span);
                        todoItem.appendChild(deleteBtn);
                        
                        todoList.appendChild(todoItem);
                    });
                }
            });
        </script>
    </body>
</html>